<template>
	<view>

		<mescroll-uni ref="mescrollRef" :height="height" @init="mescrollInit" :down="downOptions" :up="upOptions" @up="upBack">

			<view class="message_type">
				<u-cell @click="msgTypePopup = true">
					<view slot="title" style="display: flex;flex-direction: row;height: 22px;">
						<image class="message_type_icon" :src="msgTypeData.icon"></image>
						<text style="font-size: 16px;font-weight: 700;">{{msgTypeData.name}}</text>
						<u-icon style="margin-left: 4px;" size="17" name="arrow-down"></u-icon>
					</view>
				</u-cell>
			</view>




			<view class="message_box" v-for="(item,index) in dataList" :key="index">
				<u-avatar style="margin-top: 4px;" src="/static/touxiang.jpg" size="45"></u-avatar>

				<view class="message_content_box">
					<view class="userNickName">@库里 回复：</view>
					<view class="message_content" v-if="(index %2 )==0">#话题我喜欢库里我喜欢库里我喜欢库里我喜欢库里我喜欢库里我喜欢库里我喜欢库里我喜欢库
						里我喜欢库里我喜欢库里我喜欢库里我喜欢库里我喜欢库里我喜欢库里我喜欢库里我喜欢库里我喜欢库里
					</view>
					<view class="message_content" v-else-if="(index %5 )==0">#库里我喜欢库里
					</view>
					<view class="message_content" v-else>
						<image class="like_icon" src="/static/icon/icon_msg_like.png"></image> +1
					</view>

					<view class="message_time">03-26</view>
				</view>

				<view class="article_box">
					<view class="article_text">喜欢库里我
						igug 广告语
						会会会</view>
				</view>
			</view>



			<u-popup :show="msgTypePopup" @close="msgTypePopup = false" :round="10">
				<view>
					<u-cell style="margin-top: 10px;" @click="selectMsgType(0)">
						<view slot="title" style="display: flex;flex-direction: row;height: 22px;">
							<image class="message_type_icon" src="/static/icon/icon_msg_all.png"></image>
							<text style="font-size: 16px;">全部消息</text>
						</view>
						<u-icon v-if="msgTypeData.type === 0" slot="right-icon" color="#55aaff" size="17"
							name="checkmark-circle-fill"></u-icon>
					</u-cell>

					<u-cell @click="selectMsgType(1)">
						<view slot="title" style="display: flex;flex-direction: row;height: 22px;">
							<image class="message_type_icon" src="/static/icon/icon_msg_comment.png"></image>
							<text style="font-size: 16px;">回复我的</text>
						</view>
						<u-icon v-if="msgTypeData.type === 1" slot="right-icon" color="#55aaff" size="17"
							name="checkmark-circle-fill"></u-icon>
					</u-cell>

					<u-cell @click="selectMsgType(2)">
						<view slot="title" style="display: flex;flex-direction: row;height: 22px;">
							<image class="message_type_icon" src="/static/icon/icon_post_like_hl.png"></image>
							<text style="font-size: 16px;">点赞</text>
						</view>
						<u-icon v-if="msgTypeData.type === 2" slot="right-icon" color="#55aaff" size="17"
							name="checkmark-circle-fill"></u-icon>
					</u-cell>

					<view style="font-size: 17px;text-align: center;height: 50px;
								line-height: 50px;background-color: #efefef;" @click="msgTypePopup = false">关闭</view>
				</view>
			</u-popup>

		</mescroll-uni>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		props: {
			height: [Number, String],
		},
		mixins: [MescrollMixin],
		data() {
			return {
				// 下拉刷新的配置参数
				downOptions: {
					// 禁用
					use: false,
				},
				// 上拉加载的配置参数
				upOptions: {
					// 不自动加载
					auto: false,
					// 列表已无数据,列表的总数量要大于4才显示无更多数据
					noMoreSize: 4,
					// 空数据提示
					empty: {
						tip: '~ 空空如也 ~',
						btnText: '去看看'
					},
				},
				msgTypeData: {
					type: 0,
					name: '全部消息',
					icon: '/static/icon/icon_msg_all.png'
				},
				msgTypePopup: false,
				// 数据	
				dataList: [1, 2, 3, 4, 5, 6,7,8],
				// 数据加载中
				loading: false,
			}
		},

		methods: {
			// 消息类型选择
			selectMsgType(type) {
				if (type == 0) {
					this.msgTypeData = {
						type: 0,
						name: '全部消息',
						icon: '/static/icon/icon_msg_all.png'
					}
				}
				if (type == 1) {
					this.msgTypeData = {
						type: 1,
						name: '回复我的',
						icon: '/static/icon/icon_msg_comment.png'
					}
				}
				if (type == 2) {
					this.msgTypeData = {
						type: 2,
						name: '点赞',
						icon: '/static/icon/icon_post_like_hl.png'
					}
				}
				this.msgTypePopup = false
			},
			
			/**
			 * 上拉加载的回调
			 * @param {Object} page page.num:当前页,page.size:每页数据条数,默认10
			 */
			upBack(page) {
				console.log('list');
				if (!this.loading) {
					this.loading = true
					setTimeout(() => {
						this.mescroll.endSuccess(10);
						this.dataList = this.dataList.concat([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
						// 隐藏下拉刷新和上拉加载的状态;
						this.loading = false
					}, 3000)

				}

				//请求失败, 结束加载
				//this.mescroll.endErr();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.memssage_category_box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-left: 80upx;
		margin-right: 80upx;
		padding-top: 10px;
		padding-bottom: 15px;
		margin-top: 10px;
	}
	
	.category_item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0 20px;
	}
	
	.category_img_box {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		flex: 1;
		align-items: center;
	}
	
	.message_tip_num {
		font-size: 10px;
		color: #FFFFFF;
		padding: 1px 5px;
		background-color: #ff0000;
		border-radius: 20px;
		top: -50px;
		right: -15px;
		align-items: flex-start;
		border-style: solid;
		border-width: 1px;
		border-color: #FFFFFF;
	}
	
	.category_img {
		width: 50px;
		height: 50px;
		justify-content: center;
	}
	
	.category_txt {
		font-size: 13px;
		color: #333333;
		text-align: center;
		justify-content: center;
		font-weight: 500;
	}
	
	
	
	
	
	
	
	.message_type {
		margin-top: 4px;
		border-top: #f4f4f4 solid 4px;
		border-bottom: #f1f1f1 solid 1px;
	}
	.message_type_icon{
		width: 16px;
		height: 16px;
		margin-top: 3px;
		margin-right: 3px;
	}
	
	.message_box {
		display: flex;
		flex-direction: row;
		margin: 0px 10px;
		padding: 8px 0px;
		border-bottom: #f1f1f1 solid 1px;
	}
	
	.message_content_box {
		display: flex;
		flex-direction: column;
		flex: 1;
		margin: 0 5px;
	}
	
	.article_box {
		margin-top: 4px;
		width: 56px;
		height: 60px;
		border-radius: 5px;
		background-color: #f1f1f1;
	}
	
	.article_text {
		margin: 4px;
		text-align: center;
		color: #ababab;
		font-weight: 500;
		font-size: 13px;
		line-height: 17px;
		overflow: hidden;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	}
	
	.userNickName {
		color: #ababab;
		font-weight: 500;
		font-size: 13px;
		overflow: hidden;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}
	
	.message_content {
		margin: 5px 0;
		color: #ababab;
		font-weight: 500;
		font-size: 13px;
		line-height: 17px;
		overflow: hidden;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	
	.like_icon {
		width: 14px;
		height: 14px;
		margin-right: 3px;
		margin-bottom: -2px;
	}
	
	.message_time {
		color: #ababab;
		font-weight: 500;
		font-size: 11px;
	}
	

</style>
